<template>
  <div>
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="selectData.nickName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="selectData.role" class="m-2" placeholder="请选择" size="large">
            <el-option label="全部" :value="0" />
            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="nickName" label="姓名" width="180" />
      <el-table-column label="角色">
        <template #default="scope">
          <el-button type="primary" link size="small" v-for="item in scope.row.role" :key="item.role">
            {{ item.roleName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="changeUser(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="isShow" title="编辑信息">
    <el-form :model="active">
      <el-form-item label="姓名" label-width="50px">
        <el-input v-model="active.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="50px">
        <el-select multiple v-model="active.role" placeholder="请选择角色">
          <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="updateUser">更改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { getUserList, getRoleList } from '@/request/api'
import { ActiveInit, ListInit, RoleListInit, selectDataInit } from '@/type/user'
import { reactive, ref, watch } from 'vue';
const selectData = reactive<selectDataInit>({
  role: 0,
  nickName: ''
});
const list = ref<ListInit[]>([]);
const roleList = ref<RoleListInit[]>([]);
const isShow = ref<boolean>(false);
const active = ref<ActiveInit>({
  id: 0,
  nickName: '',
  role: [],
  userName: ''
})
const getUser = () => {
  getUserList().then(res => {
    console.log(res);
    list.value = res.data;
  })
}
const getRole = () => {
  getRoleList().then(res => {
    console.log(res);
    roleList.value = res.data;
  })
}
const changeUser = (row: ListInit) => {
  isShow.value = true;
  active.value = {
    id: row.id,
    nickName: row.nickName,
    userName: row.userName,
    role: row.role.map(item => item.role)
  }
}
const updateUser = () => {
  const obj: ListInit = list.value.find(item => item.id === active.value.id) as ListInit;
  obj.nickName = active.value.nickName;
  obj.role = roleList.value.filter(item => active.value.role.indexOf(item.roleId) !== -1).map(item => ({
    role: item.roleId,
    roleName: item.roleName
  }))
  list.value.map(item => {
    if (item.id === obj.id) {
      item = obj;
    }
    return item;
  })
  isShow.value = false;
}
watch([() => selectData.nickName, () => selectData.role], () => {
  if (!selectData.nickName || !selectData.role) {
    getUser()
  }
})
getUser()
getRole()
const onSubmit = () => {
  let arr: ListInit[] = [];
  if (selectData.nickName || selectData.role) {
    if (selectData.nickName) {
      arr = list.value.filter(value => {
        return value.nickName.indexOf(selectData.nickName) !== -1;
      })
    } else if (selectData.role) {
      arr = list.value.filter(value => {
        return value.role.find(item => item.role === selectData.role)
      })
    } else {
      arr = list.value;
    }
  }
  list.value = arr;
}
</script>

<style scoped>
</style>